import styles from './index.less';
import React, { useEffect, useState } from 'react';
import { queue } from './possibilities'
export default () => {


  const [pa, setPa] = useState([])
  const [puzzle, setPuzzle] = useState([])
  const [finished, setFinished] = useState([false])
  const [round, setRound] = useState(1)

  const possibilities = ['CircledFlowerEmpty', 'CircledFlowerFull', 'CircledLeafEmpty', 'CircledLeafFull', 'FlowerEmpty', 'FlowerFull', 'LeafEmpty', 'LeafFull']

  const hint = {
    'Circled': '无 圈',
    'Flower': '叶 子',
    'Empty': '实 心',
    'Full': '空 心',
    'Leaf': '花',
    '': '有 圈'
  }

  const answerHint = {
    'Circled': '有 圈',
    'Flower': '花',
    'Empty': '空 心',
    'Full': '实 心',
    'Leaf': '叶 子',
    '': '无 圈'
  }


  useEffect(()=> {
    createArrayPattern()
  }, [])

  useEffect(() => {
    createPuzzle()
  }, [pa, round])

  

  function pattern1NonUnique(arr) {
    return arr.filter(item => item.indexOf('Circled') !== -1).length == 2
  }

  function pattern2NonUnique(arr) {
    return arr.filter(item => item.indexOf('Flower') !== -1).length == 2
      || arr.filter(item => item.indexOf('Leaf') !== -1).length == 2

  }
  function pattern3NonUnique(arr) {
    return arr.filter(item => item.indexOf('Empty') !== -1).length == 2
      || arr.filter(item => item.indexOf('Full') !== -1).length == 2
  }

  function createPuzzle() {

    setFinished(false)
    const puzzle = []
    
    const combinations = pa[Math.round(Math.random() * pa.length)]

    combinations?.forEach((combination, idx) => {
      puzzle.push({
        id: idx,
        combination: combination,
        hint: '',
        choice: -1,
        answer: -1
      })
    })
    setPuzzle(puzzle)
  }

  function createArrayPattern() {
    const pa = [] 
    for (let arr of queue(possibilities, 4)) {
      // 唯一特征是Circled
      if (arr.filter(item => item.indexOf('Circled') !== -1).length === 1
        && pattern2NonUnique(arr)
        && pattern3NonUnique(arr)) {
        // 答案是Circled
        pa.push(arr)
      }
      // NonCircled唯一特征
      if (arr.filter(item => item.indexOf('Circled') !== -1).length === 3
        && pattern2NonUnique(arr)
        && pattern3NonUnique(arr)) {
          pa.push(arr)
      }
      // Flower 唯一特征
      if (arr.filter(item => item.indexOf('Flower') !== -1).length === 1
        && pattern1NonUnique(arr)
        && pattern3NonUnique(arr)) {
          pa.push(arr)
      }
      // Leaf 唯一特征
      if (arr.filter(item => item.indexOf('Leaf') !== -1).length === 1
        && pattern1NonUnique(arr)
        && pattern3NonUnique(arr)) {
          pa.push(arr)
      }

      // Empty 唯一特征
      if (arr.filter(item => item.indexOf('Empty') !== -1).length === 1
        && pattern1NonUnique(arr)
        && pattern2NonUnique(arr)) {
          pa.push(arr)
      }
      // Full 唯一特征
      if (arr.filter(item => item.indexOf('Full') !== -1).length === 1
        && pattern1NonUnique(arr)
        && pattern2NonUnique(arr)) {
          pa.push(arr)
      }
    }
    setPa(pa)
  }

  function chooseAnswer(puzzle, ch) {
    let trait = '';
    if (puzzle.filter(item => item.combination.indexOf('Circled') !== -1).length === 1) {
      trait = 'Circled';
    } else if (puzzle.filter(item => item.combination.indexOf('Circled') !== -1).length === 3) {
      trait = 'Not Circled';
    } else if (puzzle.filter(item => item.combination.indexOf('Flower') !== -1).length === 1) {
      trait = 'Flower';
    } else if (puzzle.filter(item => item.combination.indexOf('Leaf') !== -1).length === 1) {
      trait = 'Leaf';
    } else if (puzzle.filter(item => item.combination.indexOf('Empty') !== -1).length === 1) {
      trait = 'Empty';
    } else {
      //Full
      trait = 'Full';
    }

    let anp = puzzle.map(item => {
      if (trait === 'Not Circled') {
        
        if (item.combination.indexOf('Circled') === -1) {
          // 正确答案
          item.choice = 1
          item.hint = answerHint['']
          if (ch.id === item.id) {
            // 选择正确
            item.answer = 1
          } else {
            item.answer = 0
          }
        } else {
          item.choice = 0
          item.hint = hint['']
        }
        return item
      }
      if (item.combination.indexOf(trait) !== -1) {
        item.hint = answerHint[trait]
        item.choice = 1
        if (ch.id === item.id) {
          // 选择的是对的
          item.answer = 1
        } else {
          item.answer = 0
        }
      } else {
        item.hint = hint[trait]
        item.choice = 0
      }
      return item
    })
    
    setPuzzle(anp)
    setFinished(true)
  }

  function nextRound() {
    setRound(round + 1)
  }
  return (
    <div>

      <div className={styles.container}>
        <div className={styles.centered}>
          <div className={styles.title}>
            从 中 选 择 正 确 的 吧
          </div>
          <div className={styles.subTitle}>
            这将会是你在迷宫中选择的路径，或是击杀boss的幻想
          </div>
          <div className={styles.choiceRow}>
            {
              puzzle.map((item) => {
                return (
                  <div key={item.id} className={`${item.choice ===-1? '': item.choice === 1? '': styles.nonChosen} ${styles.patternHolder}`}>
                    <div className={styles.imgWrp} onClick={ ()=> chooseAnswer(puzzle, item)}>
                      {
                        item.combination ? (<img src={require(`@/static/${item.combination}.png`)} />) :
                          (<div />)
                      }

                    </div>
                    <div className={`${item.answer ===-1? '': item.answer === 1? styles.right: styles.wrong} ${styles.resultText}`}>{item.hint}</div>
                  </div>
                )
              })
            }

          </div>
          <div className={`${styles.btnPlayAgain} ${finished === true? styles.finished:''}`} onClick={() => nextRound()}>
            再来一把
          </div>
        </div>
      </div>
    </div>
  );
}
